<template>
  <view class="home-container">
    <!-- 顶部黄色背景 -->
    <view class="header-bg"></view>

    <!-- 页面内容 -->
    <scroll-view class="scroll-view" :scroll-y="true">
      <view class="content-wrapper">
        <!-- 顶部区域 -->
        <view class="top-section">
          <view class="city-selector">
            <text>长沙市</text>
            <uv-icon name="arrow-down-fill" size="10" color="#666"></uv-icon>
          </view>
          <view class="search-bar">
            <uv-search
              placeholder="输入达人名称试试"
              v-model="keyword"
              :showAction="false"
              shape="round"
              bgColor="#fff"
            ></uv-search>
          </view>
        </view>

        <!-- Banner -->
        <view class="banner-container">
          <image src="/static/images/banner2.jpg" class="banner-image"></image>
        </view>

        <!-- 筛选栏 -->
        <view class="filter-bar">
          <view class="filter-tabs">
            <uv-tabs
              :list="filterList"
              :current="currentFilter"
              @change="handleFilterChange"
              :scrollable="true"
              :activeStyle="{
                color: '#333',
                fontWeight: 'bold',
              }"
            ></uv-tabs>
          </view>
          <view class="city-selector">
            <text>长沙市</text>
            <uv-icon name="arrow-down-fill" size="10" color="#666"></uv-icon>
          </view>
        </view>

        <!-- 内容列表 -->
        <view class="list-container">
          <view v-for="item in entertainmentList" :key="item.id" class="list-item">
            <image :src="item.image" class="item-image"></image>
            <view class="item-details">
              <view class="item-header">
                <text class="item-title">{{ item.title }}</text>
                <text class="item-price">¥{{ item.price }}/小时</text>
              </view>
              <text class="item-desc">{{ item.desc }}</text>
              <view class="item-tag">{{ item.tag }}</view>
              <view class="item-footer">
                <text class="item-slogan">快来预约见面吧~</text>
                <button class="appointment-button" @click="navigateToDetail">预约</button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <custom-tab-bar></custom-tab-bar>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import CustomTabBar from '@/components/custom-tab-bar/index.vue';


// 搜索
const keyword = ref("");


// 筛选栏
const filterList = ref([
  { name: "推荐" },
  { name: "休闲娱乐" },
  { name: "旅行游玩" },
  { name: "运动户外" },
  { name: "新晋达人" },
]);
const currentFilter = ref(0);

const handleFilterChange = (item: any) => {
  currentFilter.value = item.index;
};

const navigateToDetail = () => {
  uni.navigateTo({
    url: '/pages/appointment-detail/index'
  });
};

// 娱乐列表
const entertainmentList = ref([
  {
    id: 1,
    image: '/static/images/fall1.jpg',
    title: '寻味美食',
    price: '210.00',
    desc: '“吃懂一座城的 N 种方式”',
    tag: '3小时起订',
  },
  {
    id: 2,
    image: '/static/images/fall2.jpg',
    title: '午夜烧烤',
    price: '249.00',
    desc: '“无人问我粥可温，但有人约我烤串香”',
    tag: '3小时起订',
  },
  {
    id: 3,
    image: '/static/images/fall3.jpg',
    title: '城市微醺',
    price: '249.00',
    desc: '“我们喝的不是酒，是让星星掉下来的借口”',
    tag: '3小时起订',
  },
]);

</script>

<style lang="scss" scoped>
.home-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 160px; // 背景高度，可调整
  background-color: #ffde58; // 主题黄色
  z-index: 1;
}

.scroll-view {
  position: relative;
  height: 100%;
  z-index: 2;
}

.content-wrapper {
  padding: 0 15px;
}

.top-section {
  display: flex;
  align-items: center;
  // H5 和 App 端的顶部导航栏高度不同，需要做适配
  /* #ifdef H5 */
  padding-top: 10px;
  /* #endif */
  /* #ifdef APP-PLUS */
  padding-top: 40px; // App 端状态栏高度
  /* #endif */
}

.city-selector {
  margin-right: 10px;
}

.search-bar {
  flex: 1;
}

.search-bar {
  margin-top: 15px;
}

.banner-container {
  margin-top: 15px;
  height: 100px;
}

.banner-image {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.filter-tabs {
  flex: 1;
}

.city-selector {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background-color: #f3f4f6;
  border-radius: 15px;
  font-size: 13px;
  color: #666;
  margin-left: 10px;

  text {
    margin-right: 2px;
  }
}

.list-container {
  margin-top: 15px;
}

.list-item {
  display: flex;
  background-color: #fff;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.item-image {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  margin-right: 12px;
  flex-shrink: 0;
}

.item-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.item-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.item-price {
  font-size: 16px;
  font-weight: bold;
  color: #ff5050;
}

.item-desc {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
}

.item-tag {
  align-self: flex-start;
  background-color: #f3f4f6;
  color: #666;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
  margin-top: 6px;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.item-slogan {
  font-size: 12px;
  color: #999;
}

.appointment-button {
  background-color: #ffde58;
  color: #333;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 18px;
  padding: 0 20px;
  height: 36px;
  line-height: 36px;
  margin: 0;
}


.item-content {
  padding: 10px;
}

.item-title {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

.item-footer {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.item-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}

.item-name {
  font-size: 12px;
  color: #666;
}
</style>
